<template>
    <div class="profile-header">
        <userProfileSkeleton v-if="loading"></userProfileSkeleton>
        <template v-else>
            <avatar
                :size="48"
                style="margin: 0 auto"
                :url="userInfo?.avatar"
            ></avatar>
            <div class="profile-item">
                <span>{{ userInfo?.user_name }}</span>
                <i
                    class="icon"
                    :class="`icon-${genderInfo.type}`"
                    :title="genderInfo.label"
                    :style="{'color': genderInfo.color}"
                ></i>
            </div>
            <div class="profile-item follow-block">
                <a>关注：{{ userInfo?.following }}</a>
                <a>粉丝: {{ userInfo?.follower }}</a>
            </div>
            <div class="profile-item">
                <template v-if="isSelf">
                    <el-button>编辑个人资料</el-button>
                </template>
                <template v-else>
                    <el-button>关注</el-button>
                    <el-button>私信</el-button>
                </template>
            </div>
        </template>
    </div>
</template>

<script lang="ts" setup>
import { ref, toRefs, computed } from 'vue'
import avatar from '@/components/common/avatar.vue'
import userProfileSkeleton from '@/components/skeleton/user-profile-skeleton.vue'
import { UserInfoVo } from '@/types'

type PropsType = {
    userInfo: UserInfoVo | undefined
    isSelf: boolean
}

type GenderInfo = {
    type: string
    label: string
    color: string
}

const props = defineProps<PropsType>()
const { userInfo, isSelf } = toRefs(props)

// 设置性别
const genderInfo = computed<GenderInfo>(() => {
    const gender = userInfo.value?.gender || 3

    return gender === 1
        ? {
              type: 'male',
              label: '男',
              color: '#3494eb',
          }
        : gender === 2
          ? {
                type: 'male',
                label: '女',
                color: '#ef6eaf',
            }
          : {
                type: 'male',
                label: '保密',
                color: '#3494eb',
            }
})

const loading = ref<boolean>(true)
setTimeout(() => {
    loading.value = false
}, 300)
</script>
<style lang="less" scoped>
.profile-header {
    background-color: var(--color-white);
    padding: 15px 0;
    text-align: center;
    .profile-item {
        margin-top: 15px;
        color: var(--color-text-l);
    }
    .follow-block > a {
        margin: 0 10px;
    }
}
</style>
